<template>

    <el-sub-menu v-if="item[MENU_KEY_CONFIG.CHILDREN]?.length" :index="item ? String(item[MENU_KEY_CONFIG.PATH]) : ''">
        <template #title>
            <span>{{ item[MENU_KEY_CONFIG.NAME] }}</span>
        </template>

        <div v-for="(child, index) in item[MENU_KEY_CONFIG.CHILDREN]" :key="index">
            <template v-if="child[MENU_KEY_CONFIG.CHILDREN]?.length">
                <menu-items :item="child" />
            </template>
            <el-menu-item v-else :index="`/${child[MENU_KEY_CONFIG.PATH]}`">
                <span>{{ child[MENU_KEY_CONFIG.NAME] }}</span>

            </el-menu-item>
        </div>
    </el-sub-menu>


    <el-menu-item v-else :index="`/${item[MENU_KEY_CONFIG.PATH]}` || ''">
        {{ item[MENU_KEY_CONFIG.NAME] }}
    </el-menu-item>


</template>

<script setup>
import { MENU_KEY_CONFIG } from "@/assets/common/config.js"

/**
 * el-menu菜单项
 */
const props = defineProps({
    collapse: {
        type: Boolean,
        default: true,
    },
    item: {
        type: Object,
    },
})

</script>

<style lang="less"></style>
